<style lang="less" scoped>
	.bg-img {
		height: 360px;
		background-position: left bottom;
		padding: 10px;
	}
	.qcode {
		.code {
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
			border: 4rpx solid #ffffff;
		}
	}
	.text {
		font-size: 28rpx;
		color: #ffffff;
		margin: 20rpx 0;
		font-family: PingFangSC-Regular;
		text-shadow: 0 0 2px #333333;
	}
	.margin-top {
		margin-top: 30px;
	}
	.size40 {
		font-size: 20px;
	}
</style>
<template>
	<div class="content">
		<view class="cu-modal" :class="[show ? 'show' : '']">
			<view class="cu-dialog">
				<view class="bg-img" :style="{backgroundImage: `url(${current})` }">
					<view class="cu-bar justify-end text-white">
						<view class="action">
							<text class="cuIcon-close" @tap="close"></text>
						</view>
					</view>
					<div class="qcode animated fadeIn">
						<img :src="qcode" class="code radius shadow-warp" @tap.stop="downQcode">
					</div>
					<div class="text margin-top size40">您的专属二维码已生成</div>
					<div class="text">(点击上方)二维码长按保存到手机</div>
					<div class="text">随时随地分享我的名片</div>
				</view>
				<view class="cu-bar">
					<view class="action margin-0 flex-sub  solid-left" @tap="close">{{text}}</view>
				</view>
			</view>
		</view>
	</div>
</template>
<script type="text/javascript">
	/**
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/3/31 0031
	 * Time: 下午 14:26
	 * Description:
	 */
	export default {
		name: 'model',
		props:{
			qcode: {
				type: String,
				default: ``
			},
			finish: {
				type: String,
				default: `我知道了`
			},
			tshow: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				current: 'http://img10.he29.com/static/mtu4nd/13ecade904b808a6.png',
				text: `我知道了`,
				show: false
			}
		},
		watch: {
			qcode () {
				this.show = true;
			},
			tshow () {
				this.show = this.tshow
			}
		},
		methods: {
			close () {
				this.show = false;
			},
			downQcode() {
				this.saveImgTo(this.qcode);
			},
			saveImgTo (imgSrc) {
				let that = this;
				wx.previewImage({
					current: imgSrc,
					urls: [imgSrc]
				})
			},
		}
	}
</script>
